---
title: Next.js
description: Ultracite için Next.js'e özgü lint kuralları.
---

Next.js yapılandırması, görüntü optimizasyonu, belge yapısı ve App Router kalıpları için Next.js'e özgü lint kuralları içerir.

## Kurulum

Next.js yapılandırmasını `biome.jsonc` dosyanıza ekleyin:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Genel Bakış

Bu yapılandırma, Next.js geliştirmeye özgü kurallar ekler:

- **Görüntü Optimizasyonu**: Next.js Image bileşeninin kullanılmasını zorunlu kılar
- **Belge Yapısı**: Next.js özel bileşenlerinin uygunsuz kullanımını engeller
- **İstemci Bileşenleri**: Asenkron istemci bileşenlerin doğru şekilde ele alındığından emin olur
- **Yapılandırma Dosyaları**: `next.config.*` dosyaları için özel muamele

## Next.js'e Özgü Kurallar

### Deneysel

| Kural | Ayar | Açıklama |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Next.js'te asenkron istemci bileşenlerini engeller. İstemci bileşenleri eşzamanlı olmalıdır; asenkron işlemler için sunucu bileşenlerini kullanın. |

### Performans

| Kural | Ayar | Açıklama |
|------|---------|-------------|
| `noImgElement` | `error` | HTML `<img>` öğesinin kullanılmasını yasaklar. Otomatik görüntü optimizasyonu için bunun yerine Next.js `<Image>` bileşenini kullanın. |

### Stil

| Kural | Ayar | Açıklama |
|------|---------|-------------|
| `noHeadElement` | `error` | HTML `<head>` öğesinin kullanılmasını yasaklar. Bunun yerine Next.js `next/head` veya App Router metadata API'sini kullanın. |

### Şüpheli

| Kural | Ayar | Açıklama |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Sayfa dosyalarında `next/document` içe aktarılmasını önler. `_document.tsx` yalnızca `pages/_document.tsx` içinde bulunmalıdır. |
| `noHeadImportInDocument` | `error` | `_document.tsx` içinde `next/head` içe aktarılmasını engeller. Bunun yerine `next/document` içindeki `<Head>`'i kullanın. |

## Yapılandırma Dosyası Geçersiz Kılmaları

Next.js ön ayarı, yapılandırma dosyaları ve App Router bileşenleri için özel muamele içerir:

### Next.js Yapılandırma Dosyaları

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Bu, tipik olarak lint kurallarını geçmeyebilecek Next.js yapılandırma kalıplarına izin verir.

### App Router Sayfaları ve Düzenleri

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

App Router sayfa ve layout bileşenlerinin `await` gerektirmeden asenkron olmasına izin verilir, çünkü Next.js bunları sunucu tarafı render ve veri alma için özel olarak ele alır.